<script>
export default {
  name: "lifeCycle",
  data(){
    return {
      msg:'这是内容'
    }
  },
  method:{},
  //   生命周期
//   1.beforeCreate 创建之前   data和methods中的数据还没有初始化,拿不到data里的数据    作用：页面重定向
  beforeCreate() {
    console.log('beforeCreate')
    console.log(this)//vue实例化对象
    console.log(this.msg)//undefined
  },
//   2. created 创建之后  data和methods中的数据初始化完成，是第一个能操作data和methods中数据的生命周期  作用：数据初始化，接口请求
  created() {
    console.log('created')
    console.log(this.msg)
    this.msg = 'hhhh'
  },
//   3. beforeMount   挂载虚拟dom
  beforeMount() {
    console.log('beforeMount')
    console.log(document.getElementById('box'))  //null
  },
//   4. mounted 挂载真实dom 是第一个可以操作dom元素的生命周期
  mounted() {
    console.log('mounted')
    console.log(document.getElementById('box'))
  },
//   beforeUpdate/updated会执行0次或更多次
//   5. beforeUpdate 页面更新前 data和页面中的数据还未保持同步，data中的数据是最新的，页面中的数据还是旧的
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  // 6. updated 页面更新后  data和页面中的数据都是最新的
  updated() {
    console.log('updated')
  },
//   7. beforeDestroy 页面销毁前 页面还没有真正销毁  作用：清除定时器，页面监听
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  // 8.destroyed  页面销毁后
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<template>
<div>
  生命周期
  <p id="box">{{ msg }}</p>
  <input type="text" v-model="msg">
  <router-link to="/filter">filter</router-link>
</div>
</template>

<style scoped lang="less">

</style>